<template>
  <div class="mxg-header mxg-header-fixed">
    <div class="mxg-nav">
      <!-- 头部， space-between 表示 flex 布局下的水平排列方式-->
      <!-- 使用element提供的响应式布局组件实现头部的响应式布局 -->
      <el-row type="flex" justify="space-between">
        <!-- Logo， 任意宽度都是占4格-->
        <el-col class="logo" :xs="4" :sm="4" :md="4">
          <!-- Logo -->
          <nuxt-link to="/"
            ><img src="~/assets/images/logo.png" height="40px"
          /></nuxt-link>
        </el-col>
        <!-- 导航菜单， 手机与平板坚屏都占0格，也就是隐藏，其他10格-->
        <!-- <el-col :xs="0" :sm="0" :md="10"> 不行，隐藏后放大不显示 -->
        <el-col class="hidden-sm-and-down" :md="10">
          <!-- element提供的导航菜单 ，horizontal 水平， router 开启 index 指定路由地址， default-active默认哪个被选
中-->
          <el-menu
            mode="horizontal"
            router
            :default-active="defaultActive"
            active-text-color="#345dc2"
            background-color="#fafafa"
          >
            <el-menu-item index="/">博客</el-menu-item>
            <el-menu-item index="/question">问答</el-menu-item>
            <el-menu-item index="/label">标签</el-menu-item>
          </el-menu>
        </el-col>
        <!-- 登录、注册/头像 手机与平板坚屏都占18格，其他占8格-->
        <el-col class="nav-right" :xs="18" :sm="18" :md="8">
          <!-- 登录、注册/头像 -->
          <div class="nav-sign">
            <el-button type="text">管理后台</el-button>
            <el-button
              type="text"
              @click="$store.dispatch('LoginPage')"
              v-if="!userInfo"
              >登录</el-button
            >
            <el-button
              type="primary"
              size="small"
              round
              v-if="!userInfo"
              @click="$store.dispatch('LoginPage')"
              >注册</el-button
            >
          </div>
          <!-- 头像下拉 -->
          <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link">
              <!-- element提供的头像组件及icon图标 -->
              <el-avatar
                icon="el-icon-user-solid"
                :src="userInfo ? userInfo.imageUrl : null"
              >
              </el-avatar>
            </div>
            <!-- 下拉内容 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="article">写文章</el-dropdown-item>
              <el-dropdown-item command="question">提问题</el-dropdown-item>
              <el-dropdown-item command="user">我的主页</el-dropdown-item>
              <el-dropdown-item command="logout" v-if="userInfo"
                >退出</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
  methods: {
    handleCommand(command) {
      //如果用户信息不存在就跳转到登录页
      if (!this.userInfo) {
        this.$store.dispatch("LoginPage");
      }
      //用户信息存在就根据点击的不同执行不同指令
      switch (command) {
        case "article":
          // 写文章，打开新窗口
          let routeData = this.$router.resolve("/article/edit");
          window.open(routeData.href, "_blank");
          break;
        case "question":
          // 提问题，打开新窗口
          routeData = this.$router.resolve("/question/edit");
          window.open(routeData.href, "_blank");
          break;
        case "user":
          // 个人主页，打开新窗口
          routeData = this.$router.resolve("/user");
          window.open(routeData.href, "_blank");
          break;
        case "logout":
          this.$store.dispatch("Logout");
          break;
        default:
          break;
      }
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    // 高亮显示哪个导航标签
    defaultActive() {
      // 是否存在多级子路由 不存在子路由即为首页
      let routePath = this.$route.matched[0].path || "/";
      // 从第2个字符开始往后找是否存在 /(判断是否有两个/，有两个就只截取前一部分)
      if (routePath.indexOf("/", 1) !== -1) {
        // 有子路由，截取一级路由地址
        routePath = routePath.substring(0, routePath.indexOf("/", 1));
      }
      // /article 也转成 / 高亮 `博客`(针对/article的情况，也要转换为/)
      return routePath.indexOf("/article") !== -1 ? "/" : routePath;
    },
  },
};
</script>

<style scoped>
/* 头部 */
.mxg-header {
  width: 100%;
  height: 60px;
  border-top: 3px solid #345dc2;
  background-color: #fafafa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  z-index: 2000;
}
/* 固定头部 */
.mxg-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
}
/* 导航 */
.mxg-header .mxg-nav {
  max-width: 1140px;
  /* 居中 */
  margin: auto;
  padding: 10px;
}
.el-menu.el-menu--horizontal {
  /* 去除底部边框 */
  border-bottom: 0px;
  margin-top: -10px;
}
/* 导航右侧 */
.nav-right {
  text-align: right;
}
.nav-sign {
  position: absolute;
  right: 0;
  margin-right: 50px;
}
/* 防止点击头像有边框 */
div:focus {
  outline: none;
}
</style>
